<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title> ModularAdmin - Free Dashboard Theme | HTML Version </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->
    <link rel="stylesheet" href="css/vendor.css">
    <!-- Theme initialization -->
    <script>
        var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
        {};
        var themeName = themeSettings.themeName || '';
        if (themeName) {
            document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
        }
        else {
            document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
        }
    </script>
</head>

<body>
<div class="main-wrapper">
    <div class="app" id="app">
        <header class="header">
            <div class="header-block header-block-collapse hidden-lg-up">
                <button class="collapse-btn" id="sidebar-collapse-btn"><i class="fa fa-bars"></i></button>
            </div>
            <div class="header-block header-block-search hidden-sm-down">
                <form role="search">
                    <div class="input-container"><i class="fa fa-search"></i>
                        <input type="search" placeholder="Search">

                        <div class="underline"></div>
                    </div>
                </form>
            </div>
            <div class="header-block header-block-buttons">
                <a href="https://github.com/modularcode/modular-admin-html"
                   class="btn btn-oval btn-sm rounded-s header-btn"> <i class="fa fa-github-alt"></i> View on GitHub
                </a>
                <a href="https://github.com/modularcode/modular-admin-html/releases/download/v1.0.0/modular-admin-html-1.0.0.zip"
                   class="btn btn-oval btn-sm rounded-s header-btn"> <i class="fa fa-cloud-download"></i> Download .zip
                </a>
            </div>
            <div class="header-block header-block-nav">
                <ul class="nav-profile">
                    <li class="notifications new">
                        <a href="" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <sup>
                            <span class="counter">8</span>
                        </sup> </a>

                        <div class="dropdown-menu notifications-dropdown-menu">
                            <ul class="notifications-container">
                                <li>
                                    <a href="" class="notification-item">
                                        <div class="img-col">
                                            <div class="img" style="background-image: url('assets/faces/3.jpg')"></div>
                                        </div>
                                        <div class="body-col">
                                            <p><span class="accent">Zack Alien</span> pushed new commit: <span
                                                    class="accent">Fix page load performance issue</span>. </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="" class="notification-item">
                                        <div class="img-col">
                                            <div class="img" style="background-image: url('assets/faces/5.jpg')"></div>
                                        </div>
                                        <div class="body-col">
                                            <p><span class="accent">Amaya Hatsumi</span> started new task: <span
                                                    class="accent">Dashboard UI design.</span>. </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="" class="notification-item">
                                        <div class="img-col">
                                            <div class="img" style="background-image: url('assets/faces/8.jpg')"></div>
                                        </div>
                                        <div class="body-col">
                                            <p><span class="accent">Andy Nouman</span> deployed new version of <span
                                                    class="accent">NodeJS REST Api V3</span></p>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                            <footer>
                                <ul>
                                    <li><a href="">
                                        View All
                                    </a></li>
                                </ul>
                            </footer>
                        </div>
                    </li>
                    <li class="profile dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                           aria-haspopup="true" aria-expanded="false">
                            <div class="img"
                                 style="background-image: url('https://avatars3.githubusercontent.com/u/3959008?v=3&s=40')"></div> <span
                                class="name">
    			      John Doe
    			    </span> </a>

                        <div class="dropdown-menu profile-dropdown-menu" aria-labelledby="dropdownMenu1">
                            <a class="dropdown-item" href="#"> <i class="fa fa-user icon"></i> Profile </a>
                            <a class="dropdown-item" href="#"> <i class="fa fa-bell icon"></i> Notifications </a>
                            <a class="dropdown-item" href="#"> <i class="fa fa-gear icon"></i> Settings </a>

                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="login.html"> <i class="fa fa-power-off icon"></i> Logout </a>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
        <aside class="sidebar">
            <div class="sidebar-container">
                <div class="sidebar-header">
                    <div class="brand">
                        <div class="logo"><span class="l l1"></span> <span class="l l2"></span> <span
                                class="l l3"></span> <span class="l l4"></span> <span class="l l5"></span></div>
                        Modular Admin
                    </div>
                </div>
                <nav class="menu">
                    <ul class="nav metismenu" id="sidebar-menu">
                        <li>
                            <a href="index.html"> <i class="fa fa-home"></i> Dashboard </a>
                        </li>
                        <li>
                            <a href=""> <i class="fa fa-th-large"></i> Items Manager <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="items-list.html">
                                    Items List
                                </a></li>
                                <li><a href="item-editor.html">
                                    Item Editor
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href=""> <i class="fa fa-bar-chart"></i> Charts <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="charts-flot.html">
                                    Flot Charts
                                </a></li>
                                <li><a href="charts-morris.html">
                                    Morris Charts
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href=""> <i class="fa fa-table"></i> Tables <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="static-tables.html">
                                    Static Tables
                                </a></li>
                                <li><a href="responsive-tables.html">
                                    Responsive Tables
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="forms.html"> <i class="fa fa-pencil-square-o"></i> Forms </a>
                        </li>
                        <li class="active open">
                            <a href=""> <i class="fa fa-desktop"></i> UI Elements <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="buttons.html">
                                    Buttons
                                </a></li>
                                <li><a href="cards.html">
                                    Cards
                                </a></li>
                                <li><a href="typography.html">
                                    Typography
                                </a></li>
                                <li><a href="icons.html">
                                    Icons
                                </a></li>
                                <li class="active"><a href="grid.html">
                                    Grid
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href=""> <i class="fa fa-file-text-o"></i> Pages <i class="fa arrow"></i> </a>
                            <ul>
                                <li><a href="login.html">
                                    Login
                                </a></li>
                                <li><a href="signup.html">
                                    Sign Up
                                </a></li>
                                <li><a href="reset.html">
                                    Reset
                                </a></li>
                                <li><a href="error-404.html">
                                    Error 404 App
                                </a></li>
                                <li><a href="error-404-alt.html">
                                    Error 404 Global
                                </a></li>
                                <li><a href="error-500.html">
                                    Error 500 App
                                </a></li>
                                <li><a href="error-500-alt.html">
                                    Error 500 Global
                                </a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="https://github.com/modularcode/modular-admin-html"> <i
                                    class="fa fa-github-alt"></i> Theme Docs </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <footer class="sidebar-footer">
                <ul class="nav metismenu" id="customize-menu">
                    <li>
                        <ul>
                            <li class="customize">
                                <div class="customize-item">
                                    <div class="row customize-header">
                                        <div class="col-xs-4"></div>
                                        <div class="col-xs-4">
                                            <label class="title">fixed</label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label class="title">static</label>
                                        </div>
                                    </div>
                                    <div class="row hidden-md-down">
                                        <div class="col-xs-4">
                                            <label class="title">Sidebar:</label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="sidebarPosition"
                                                       value="sidebar-fixed"> <span></span> </label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="sidebarPosition" value="">
                                                <span></span> </label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <label class="title">Header:</label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="headerPosition"
                                                       value="header-fixed"> <span></span> </label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="headerPosition" value="">
                                                <span></span> </label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <label class="title">Footer:</label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="footerPosition"
                                                       value="footer-fixed"> <span></span> </label>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>
                                                <input class="radio" type="radio" name="footerPosition" value="">
                                                <span></span> </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="customize-item">
                                    <ul class="customize-colors">
                                        <li><span class="color-item color-red" data-theme="red"></span></li>
                                        <li><span class="color-item color-orange" data-theme="orange"></span></li>
                                        <li><span class="color-item color-green" data-theme="green"></span></li>
                                        <li><span class="color-item color-seagreen" data-theme="seagreen"></span></li>
                                        <li><span class="color-item color-blue active" data-theme=""></span></li>
                                        <li><span class="color-item color-purple" data-theme="purple"></span></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                        <a href=""> <i class="fa fa-cog"></i> Customize </a>
                    </li>
                </ul>
            </footer>
        </aside>
        <div class="sidebar-overlay" id="sidebar-overlay"></div>
        <article class="content grid-page">
            <div class="title-block">
                <h3 class="title">
                    Grid
                </h3>

                <p class="title-description"> Grid elements </p>
            </div>
            <section class="section">
                <div class="row sameheight-container">
                    <div class="col-md-12">
                        <div class="card sameheight-item">
                            <div class="card-block">
                                <div class="card-title-block">
                                    <h3 class="title">
                                        Example: Stacked-to-horizontal
                                    </h3></div>
                                <section class="section">
                                    <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a
                                        default grid system that starts out stacked on mobile devices and tablet devices
                                        (the extra small to small range) before becoming horizontal
                                        on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p>

                                    <div class="row">
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="box-placeholder">.col-md-1</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="box-placeholder">.col-md-8</div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="box-placeholder">.col-md-4</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="box-placeholder">.col-md-4</div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="box-placeholder">.col-md-4</div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="box-placeholder">.col-md-4</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="box-placeholder">.col-md-6</div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="box-placeholder">.col-md-6</div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section">
                <div class="row sameheight-container">
                    <div class="col-md-12">
                        <div class="card sameheight-item">
                            <div class="card-block">
                                <div class="card-title-block">
                                    <h3 class="title">
                                        Example: Mobile and desktop
                                    </h3></div>
                                <section class="section">
                                    <p>Don't want your columns to simply stack in smaller devices? Use the extra small
                                        and medium device grid classes by adding <code>.col-xs-*</code>
                                        <code>.col-md-*</code>to your columns. See the example below for
                                        a better idea of how it all works.</p>

                                    <div class="row">
                                        <div class="col-xs-12 col-md-8">
                                            <div class="box-placeholder">.col-xs-12 .col-md-8</div>
                                        </div>
                                        <div class="col-xs-6 col-md-4">
                                            <div class="box-placeholder">.col-xs-6 .col-md-4</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-md-4">
                                            <div class="box-placeholder">.col-xs-6 .col-md-4</div>
                                        </div>
                                        <div class="col-xs-6 col-md-4">
                                            <div class="box-placeholder">.col-xs-6 .col-md-4</div>
                                        </div>
                                        <div class="col-xs-6 col-md-4">
                                            <div class="box-placeholder">.col-xs-6 .col-md-4</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6">
                                            <div class="box-placeholder">.col-xs-6</div>
                                        </div>
                                        <div class="col-xs-6">
                                            <div class="box-placeholder">.col-xs-6</div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section">
                <div class="row sameheight-container">
                    <div class="col-md-12">
                        <div class="card sameheight-item">
                            <div class="card-block">
                                <div class="card-title-block">
                                    <h3 class="title">
                                        Example: Mobile, tablet, desktops
                                    </h3></div>
                                <section class="section">
                                    <p>Build on the previous example by creating even more dynamic and powerful layouts
                                        with tablet <code>.col-sm-*</code>classes.</p>

                                    <div class="row">
                                        <div class="col-xs-12 col-sm-6 col-md-8">
                                            <div class="box-placeholder">.col-xs-12 .col-sm-6 .col-md-8</div>
                                        </div>
                                        <div class="col-xs-6 col-md-4">
                                            <div class="box-placeholder">.col-xs-6 .col-md-4</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-6 col-sm-4">
                                            <div class="box-placeholder">.col-xs-6 .col-sm-4</div>
                                        </div>
                                        <div class="col-xs-6 col-sm-4">
                                            <div class="box-placeholder">.col-xs-6 .col-sm-4</div>
                                        </div>
                                        <div class="clearfix visible-xs">
                                            <div class="box-placeholder"></div>
                                        </div>
                                        <div class="col-xs-6 col-sm-4">
                                            <div class="box-placeholder">.col-xs-6 .col-sm-4</div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section">
                <div class="row sameheight-container">
                    <div class="col-md-12">
                        <div class="card sameheight-item">
                            <div class="card-block">
                                <div class="card-title-block">
                                    <h3 class="title">
                                        Responsive column resets
                                    </h3></div>
                                <section class="section">
                                    <p>With the four tiers of grids available you're bound to run into issues where, at
                                        certain breakpoints, your columns don't clear quite right as one is taller than
                                        the other. To fix that, use a combination of a
                                        <code>.clearfix</code>and our <a href="#responsive-utilities">responsive utility
                                            classes</a>.</p>

                                    <div class="row">
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="box-placeholder">.col-xs-6 .col-sm-3
                                                <br>Resize your viewport or check it out on your phone for an example.
                                            </div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="box-placeholder">.col-xs-6 .col-sm-3</div>
                                        </div>
                                        <div class="clearfix visible-xs"></div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="box-placeholder">.col-xs-6 .col-sm-3</div>
                                        </div>
                                        <div class="col-xs-6 col-sm-3">
                                            <div class="box-placeholder">.col-xs-6 .col-sm-3</div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section">
                <div class="row sameheight-container">
                    <div class="col-md-12">
                        <div class="card sameheight-item">
                            <div class="card-block">
                                <div class="card-title-block">
                                    <h3 class="title">
                                        Offsetting columns
                                    </h3></div>
                                <section class="section">
                                    <p>Move columns to the right using <code>.col-md-offset-*</code>classes. These
                                        classes increase the left margin of a column by <code>*</code>columns. For
                                        example, <code>.col-md-offset-4</code>moves <code>.col-md-4</code>over
                                        four columns.</p>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="box-placeholder">.col-md-4</div>
                                        </div>
                                        <div class="col-md-4 col-md-offset-4">
                                            <div class="box-placeholder">.col-md-4 .col-md-offset-4</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3 col-md-offset-3">
                                            <div class="box-placeholder">.col-md-3 .col-md-offset-3</div>
                                        </div>
                                        <div class="col-md-3 col-md-offset-3">
                                            <div class="box-placeholder">.col-md-3 .col-md-offset-3</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 col-md-offset-3">
                                            <div class="box-placeholder">.col-md-6 .col-md-offset-3</div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section">
                <div class="row sameheight-container">
                    <div class="col-md-12">
                        <div class="card sameheight-item">
                            <div class="card-block">
                                <div class="card-title-block">
                                    <h3 class="title">
                                        Nesting columns
                                    </h3></div>
                                <section class="section">
                                    <p>To nest your content with the default grid, add a new <code>.row</code>and set of
                                        <code>.col-md-*</code>columns within an existing <code>.col-md-*</code>column.
                                        Nested rows should include a set of columns that
                                        add up to 12.</p>

                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="box-placeholder">Level 1: .col-md-9
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="box-placeholder">Level 2: .col-md-6</div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="box-placeholder">Level 2: .col-md-6</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section">
                <div class="row sameheight-container">
                    <div class="col-md-12">
                        <div class="card sameheight-item">
                            <div class="card-block">
                                <div class="card-title-block">
                                    <h3 class="title">
                                        Column ordering
                                    </h3></div>
                                <section class="section">
                                    <p>Easily change the order of our built-in grid columns with
                                        <code>.col-md-push-*</code>and <code>.col-md-pull-*</code>modifier classes.</p>

                                    <div class="row">
                                        <div class="col-md-9 col-md-push-3">
                                            <div class="box-placeholder">.col-md-9 .col-md-push-3</div>
                                        </div>
                                        <div class="col-md-3 col-md-pull-9">
                                            <div class="box-placeholder">.col-md-3 .col-md-pull-9</div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </article>
        <footer class="footer">
            <div class="footer-block buttons">
                <iframe class="footer-github-btn"
                        src="https://ghbtns.com/github-btn.html?user=modularcode&repo=modular-admin-html&type=star&count=true"
                        frameborder="0" scrolling="0" width="140px" height="20px"></iframe>
            </div>
            <div class="footer-block author">
                <ul>
                    <li> created by <a href="https://github.com/modularcode">ModularCode</a></li>
                    <li><a href="https://github.com/modularcode/modular-admin-html#get-in-touch">get in touch</a></li>
                </ul>
            </div>
        </footer>
        <div class="modal fade" id="modal-media">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span> <span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Media Library</h4></div>
                    <div class="modal-body modal-tab-container">
                        <ul class="nav nav-tabs modal-tabs" role="tablist">
                            <li class="nav-item"><a class="nav-link" href="#gallery" data-toggle="tab" role="tab">Gallery</a>
                            </li>
                            <li class="nav-item"><a class="nav-link active" href="#upload" data-toggle="tab" role="tab">Upload</a>
                            </li>
                        </ul>
                        <div class="tab-content modal-tab-content">
                            <div class="tab-pane fade" id="gallery" role="tabpanel">
                                <div class="images-container">
                                    <div class="row"></div>
                                </div>
                            </div>
                            <div class="tab-pane fade active in" id="upload" role="tabpanel">
                                <div class="upload-container">
                                    <div id="dropzone">
                                        <form action="/" method="POST" enctype="multipart/form-data"
                                              class="dropzone needsclick dz-clickable" id="demo-upload">
                                            <div class="dz-message-block">
                                                <div class="dz-message needsclick"> Drop files here or click to
                                                    upload.
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Insert Selected</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
        <div class="modal fade" id="confirm-modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title"><i class="fa fa-warning"></i> Alert</h4></div>
                    <div class="modal-body">
                        <p>Are you sure want to do this?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
</div>
<!-- Reference block for JS -->
<div class="ref" id="ref">
    <div class="color-primary"></div>
    <div class="chart">
        <div class="color-primary"></div>
        <div class="color-secondary"></div>
    </div>
</div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
</body>

</html>